<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location</title>
  <style>
    .example {
      width: 400px;
      height: 300px;
      border: 1px solid #b0b0b0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: deeppink;
    }

    .box-relative {
      position: relative;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .box-absolute {
      position: absolute;
      bottom: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .pos {
      position: relative;
    }

    .ad {
      position: fixed;
      top: 500px;
      right: 10px;
    }

    .example-z {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid grey;
    }

    .box-z {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: peru;
      border: 1px solid black;
    }

    .z-auto {
      z-index: auto;

    }

    .z-1 {
      z-index: 1;
      left: 20px;
      top: 20px;
    }

    .z-2 {
      z-index: 2;
      left: 40px;
      top: 40px;
    }
  </style>
</head>

<body>
  <h3>一. 定位组成</h3>
  <p><code>定位 = 定位模式 + 边偏移</code></p>
  <p>定位模式: (根据css的position属性设置,共有四个值)</p>
  <ul>
    <li>static: 静态</li>
    <li>relative: 相对</li>
    <li>absolute: 绝对</li>
    <li>fixed: 固定</li>
  </ul>
  <p>边偏移: (定义元素相对于其父元素边线的距离)</p>
  <ul>
    <li>top: 80px</li>
    <li>bottom: 80px</li>
    <li>left: 80p</li>
    <li>right: 80px</li>
  </ul>
  <h3>二. 使用方式</h3>
  <h4>1. 静态定位 (默认属性,按照标准流特性没有边偏移,很少使用)</h4>
  <p><code>position: static</code></p>
  <h4>2. 相对定位 (元素在移动位置时,是相对于它原来的位置,可看作为"自强型(按照自己的思想)",经常使用)</h4>
  <p>
    <code>
      position: relative;<br>
      top: 100px;<br>
      left: 100px;
    </code>
  </p>
  <p><b>注意</b>: 相对定位的盒子原占有的(标准流)空间依然存在,不会脱标!</p>
  <p>示例:</p>
  <div class="example">
    <div class="box-relative">相对定位</div>
    <div class="box">标准流</div>
  </div>
  <h4>3. 绝对定位 (相对于它的祖先元素来说的,看作是"功利型(按照最近一级拥有属性的父级)",经常使用)</h4>
  <p>
    <code>
      position: absolute;<br>
      top: 100px;<br>
      left: 100px;
    </code>
  </p>
  <p>绝对定位特点:</p>
  <ol>
    <li>如果没有祖先元素或者祖先元素没有定位,则以浏览器(Document)为准进行定位</li>
    <li>如果祖先元素有定位(相对/绝对/固定),则以最近一级的祖先元素(爸爸没有则找爷爷,都没有则找Document)作为参照进行移动</li>
    <li>绝对定位不再占有原先的位置 (脱标)</li>
  </ol>
  <p>示例1: (在浏览器内寻找绝对定位1盒子)</p>
  <div class="example">
    <div class="box-absolute">绝对定位1</div>
    <div class="box">标准流</div>
  </div>
  <p>示例2: (在浏览器内寻找绝对定位2盒子)</p>
  <div class="example pos">
    <div class="box-absolute">绝对定位2</div>
    <div class="box">标准流</div>
  </div>
  <h3>4. 固定定位 (元素固定于浏览器可视区的位置,不受其他元素影响也不占用标准流位置,滚动或缩放不改变位置)</h3>
  <p>
    <code>
      position: fixed;<br>
      top: 100px;<br>
      left: 100px;
    </code>
  </p>
  <p>示例: 如右侧中间的广告</p>
  <div class="ad">
    <img src="img/ad.jpg" alt="">
  </div>
  <h3>5. 粘性定位 (了解, 不常用IE不兼容, 可以看作是相对定位和固定定位的混合)</h3>
  <ul>
    <li>以浏览器的可视区为参照 (fixed特点)</li>
    <li>占有原先位置 (relative特点)</li>
    <li>必须添加方位的其中一个才有效</li>
    <li>常见的,同样的效果使用js制作</li>
  </ul>
  <p>
    <code>
      position: sticky;<br>
      top: 0;  激活粘性
    </code>
  </p>
  <h3>三. 使用场景</h3>
  <h4>1. 绝对与相对定位的使用场景: 子绝父相 (这是一个常用的模式:父元素用相对定位,子元素用绝对定位)</h4>
  <ul>
    <li>子绝: 不会占有位置,可以放入父相的任何一个地方而不影响其他兄弟!</li>
    <li>父相: 需要加定位限制子元素,保证其子显示在父内;且需要保证父的位置,则使用相对位置!</li>
  </ul>
  <h4>2. 固定位置使用的小技巧: 随版心(某一模块/盒子)的固定效果</h4>
  <p>
    <code>
      left: 50%;   (移动到中央)<br>
      margin-left: 版心宽度/2;   (移动到版心右侧边缘)
    </code>
  </p>

  <h4>3. 绝对定位小技巧: 在盒子中水平居中</h4>
  <p>
    <code>
        left: 50%;   (移动到中央)<br>
        margin-left: -自身宽度/2;   (向左边走自身的一半)
      </code>
  </p>
  <h3>四. 定位的叠放次序</h3>
  <p>带定位的盒子可能会重叠,此时可以用z-index属性来控制盒子前后层次;相同值可看书写顺序,后来者居上</p>
  <p>
    <code>
      z-index: 负整数/0/auto(默认)/正整数; (数值越大,盒子越靠上)
    </code>
  </p>
  <p>示例:</p>
  <div class="example-z">
    <div class="box-z z-auto">z-index:auto</div>
    <div class="box-z z-1">z-index: 1</div>
    <div class="box-z z-2">z-index: 2</div>
  </div>
  <h3>五. 定位特性</h3>
  <ul>
    <li>行内元素添加绝对/固定定位,可以直接设置宽高</li>
    <li>块级元素添加绝对/固定定位,如未设置宽高,默认大小是内容大小</li>
    <li>浮动元素只会压住标准流的盒子但不会压住其中的文字和图片(会环绕显示);而绝对/固定定位会完全压住!</li>
  </ul>
</body>

</html>